CSS 論理プロパティレベル 2：強化された記述モードのサポートによる真にグローバルなウェブの構築

ウェブ開発者は数十年にわたり、上、下、左、そして右といった物理世界に根ざした語彙を使ってレイアウトを構築してきました。margin-left、padding-top、border-rightを設定します。ウェブが主に左から右、上から下の媒体であった時代には、このメンタルモデルは非常に役立ちました。しかし、ウェブはグローバルです。すべての言語と文化のためのプラットフォームであり、その多くはこの単純な方向の流れに従いません。

アラビア語やヘブライ語のような言語は、右から左に書かれます。伝統的な日本語と中国語は、上から下、右から左に垂直に書くことができます。物理的な、左から右への CSS モデルをこれらの記述システムに強制すると、レイアウトの崩れ、フラストレーションのたまるユーザーエクスペリエンス、そして大量のコードオーバーライドが発生します。ここで CSS 論理プロパティと値が登場し、物理的な方向からフローに相対的な論理的な方向への根本的なパラダイムシフトを表します。レベル 1 が基礎を築いた一方で、CSS 論理プロパティレベル 2 は全体像を完成させ、真にユニバーサルな、記述モードを意識したユーザーインターフェースを構築するために必要なツールを提供します。

この包括的なガイドでは、レベル 2 によってもたらされる機能強化について深く掘り下げていきます。まず、コアコンセプトの再確認から始め、次にギャップを埋める新しいプロパティと値を調査し、最後に、あらゆる記述モードにシームレスに適応するコンポーネントを構築することで、すべてを実践に移します。CSS レイアウトに対する考え方を永遠に変える準備をしてください。

クイックリフレッシュ：論理プロパティのコアコンセプト（レベル 1）

レベル 2 の追加機能を理解するためには、レベル 1 によって築かれた基盤をしっかりと理解しておく必要があります。システム全体は、記述モードと、その結果生じるブロック軸とインライン軸という 2 つの主要な概念に基づいて構築されています。

4 つの記述モード

writing-mode CSS プロパティは、テキストがレイアウトされる方向を決定します。デフォルトを当然のことと思いがちですが、ページ上のコンテンツのフローを根本的に変更するいくつかの値があります。

• horizontal-tb: これは、ほとんどの西洋言語のデフォルトです。テキストは、左から右（または方向に応じて右から左）に水平方向（インライン軸）に流れ、行は上から下（ブロック軸）に積み重ねられます。
• vertical-rl: 伝統的な東アジアのタイポグラフィー（例：日本語、中国語）に使用されます。テキストは、上から下（インライン軸）に垂直方向に流れ、行は右から左（ブロック軸）に積み重ねられます。
• vertical-lr: 上記と同様ですが、行は左から右（ブロック軸）に積み重ねられます。あまり一般的ではありませんが、モンゴル文字のような一部のコンテキストで使用されます。
• sidelong-rl / sidelong-lr: これらは、グリフを横向きにレイアウトしたい特定のユースケース用です。一般的なウェブコンテンツではあまり一般的ではありません。

重要な概念：ブロック対インライン軸

これは把握すべき最も重要な概念です。論理的な世界では、「垂直」と「水平」について考えるのをやめ、ブロック軸とインライン軸という観点から考え始めます。これらの軸の方向は、writing-mode に完全に依存します。

• インライン軸は、1 行内でテキストが流れる方向です。
• ブロック軸は、新しい行が積み重ねられる方向です。

これがどのように機能するかを見てみましょう。

• 標準的な英語（writing-mode: horizontal-tb）では、インライン軸は水平方向に走り、ブロック軸は垂直方向に走ります。
• 伝統的な日本語（writing-mode: vertical-rl）では、インライン軸は垂直方向に走り、ブロック軸は水平方向に走ります。

これらの軸は切り替わる可能性があるため、width や height のようなプロパティは曖昧になります。width は水平軸に沿ったサイズですか、それともインライン軸に沿ったサイズですか？論理プロパティは、この曖昧さを解消します。各軸に start と end があります。

• block-start: 英語では「上」ですが、垂直方向の日本語では「右」です。
• block-end: 英語では「下」ですが、垂直方向の日本語では「左」です。
• inline-start: 英語では「左」ですが、垂直方向の日本語では「上」です。
• inline-end: 英語では「右」ですが、垂直方向の日本語では「下」です。

物理プロパティから論理プロパティへのマッピング（レベル 1）

レベル 1 では、物理プロパティから論理プロパティへの包括的なマッピングセットが導入されました。主な例をいくつか示します。

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (ポジショニング用) → inset-inline-start / inset-inline-end
• top / bottom (ポジショニング用) → inset-block-start / inset-block-end

レベル 1 では、margin-inline (start と end 用) や padding-block (start と end 用) のような便利な省略形も提供されました。

レベル 2 へようこそ：何が新しく、なぜそれが重要なのか

レベル 1 は記念碑的な前進でしたが、いくつかの目立ったギャップを残しました。float、clear、resize のような特定の基本的な CSS プロパティには、論理的な同等のものがありませんでした。さらに、border-radius のようなプロパティは論理的に制御できなかったため、開発者は細かいスタイリングのために物理プロパティに頼らざるを得ませんでした。これは、レイアウトの 90% を論理プロパティで構築できたとしても、異なる記述モードに対応するために物理的なオーバーライドが必要になることを意味し、目的を部分的に損なうことになります。

CSS 論理プロパティレベル 2 は、これらの欠点を直接的に解決します。これは、根本的に新しいシステムを導入するのではなく、レベル 1 で始まったシステムを完成させることです。これは、主に次の 2 つの方法で実現されます。

1. 本質的に物理的であった古い CSS 機能（float など）のために、新しい論理プロパティと値を導入する。
2. 以前は無視されていた複雑な省略形（border-radius など）に対する論理プロパティのマッピングを追加する。

レベル 2 により、完全にフローに相対的なスタイリングシステムのビジョンはほぼ完成し、ハックやオーバーライドなしに、誰にとっても、どこでも動作する、複雑で美しく、堅牢なコンポーネントを構築することができます。

深掘り：レベル 2 の新しい論理値とプロパティ

レベル 2 が開発者ツールキットにもたらす最も影響力のある追加機能を探求しましょう。これらは、ギャップを埋め、真にユニバーサルなコンポーネント設計を実現するツールです。

Float と Clear：論理革命

float プロパティは、長年にわたって CSS レイアウトの要となってきましたが、その値である left と right は、物理的な方向の定義です。英語で段落の左に画像を float すると、正しく表示されます。しかし、ドキュメントの方向をアラビア語の右から左（RTL）に切り替えると、画像はテキストブロックの「間違った」側に表示されます。それは右側にあるべきで、それは行の先頭です。

レベル 2 では、float プロパティに 2 つの新しい論理キーワードが導入されています。

• float: inline-start; これは、要素をインライン方向の先頭に float します。LTR 言語では、これは左です。RTL 言語では、これは右です。vertical-rl 記述モードでは、これは上です。
• float: inline-end; これは、要素をインライン方向の末尾に float します。LTR では、これは右です。RTL では、これは左です。vertical-rl では、これは下です。

同様に、float された要素の周りのコンテンツの折り返しを制御するために使用される clear プロパティは、その論理的な対応物を取得します。

• clear: inline-start; インライン先頭側の float をクリアします。
• clear: inline-end; インライン末尾側の float をクリアします。

これは、ゲームチェンジャーです。追加の CSS を 1 行も記述することなく、あらゆる言語の方向に自動的に適応する古典的な画像とテキストのラップレイアウトを作成できるようになりました。

論理的な Resize による機能強化された制御

resize プロパティは、一般的に textarea で使用され、ユーザーが要素のサイズを変更できるようにします。その従来の値は、horizontal、vertical、および both です。しかし、垂直方向の記述モードでは「horizontal」とはどういう意味ですか？それは依然として物理的な水平軸に沿ったサイズ変更を意味しますが、それはユーザーまたはデザイナーが意図していることではないかもしれません。ユーザーは、行を長くしたり短くしたりするために、インライン軸に沿って要素のサイズを変更したいと考えている可能性があります。

レベル 2 では、resize に論理値が導入されています。

• resize: inline; インライン軸に沿ったサイズ変更を許可します。
• resize: block; ブロック軸に沿ったサイズ変更を許可します。

英語の textarea で resize: block; を使用すると、ユーザーはそれを高くすることができます。垂直方向の記述モードで使用すると、ユーザーはそれを広くすることができます（これはブロック方向です）。それはただ機能します。

`caption-side`：テーブルキャプションの論理的なポジショニング

caption-side プロパティは、テーブルの caption の配置を決定します。古い値は top と bottom でした。繰り返しますが、これらは物理的です。デザイナーの意図がキャプションをテーブルのコンテンツの「前」に配置することである場合、top は水平方向の記述モードで機能します。しかし、vertical-rl モードでは、ブロックフローの「開始」は上ではなく右にあります。

レベル 2 は、論理的な解決策を提供します。

• caption-side: block-start; キャプションをブロックフローの先頭に配置します。
• caption-side: block-end; キャプションをブロックフローの末尾に配置します。

`text-align`：基本的な論理値

text-align の値 start と end はしばらく前から存在していますが、それらは論理プロパティの哲学の重要な部分であり、再確認する価値があります。text-align: left; を使用することは、RTL 言語でレイアウトの問題をすぐに引き起こす一般的な間違いです。正しい最新のアプローチは、常に次を使用することです。

• text-align: start; テキストをインライン方向の先頭に揃えます。
• text-align: end; テキストをインライン方向の末尾に揃えます。

レベル 2 の至宝：論理的な `border-radius`

おそらくレベル 2 で最も重要で強力な追加機能は、境界線の半径を論理的に制御するためのプロパティのセットです。以前は、カードの角を「上」だけに丸くしたい場合は、border-top-left-radius と border-top-right-radius を使用していました。これは、垂直方向の記述モードでは完全に壊れます。垂直方向の記述モードでは、「上」の角が start-start と end-start の角になるためです。

レベル 2 では、フローに相対的な方法で要素の 4 つの角にマッピングされる 4 つの新しい長形プロパティが導入されています。命名規則は border-[block-edge]-[inline-edge]-radius です。

• border-start-start-radius: ブロック開始側とインライン開始側が出会う角。
• border-start-end-radius: ブロック開始側とインライン終了側が出会う角。
• border-end-start-radius: ブロック終了側とインライン開始側が出会う角。
• border-end-end-radius: ブロック終了側とインライン終了側が出会う角。

これは最初は視覚化するのが難しい可能性があるため、さまざまな記述モードでマッピングしてみましょう。

`writing-mode: horizontal-tb` (例：英語) での `border-radius` のマッピング

• border-start-start-radius は top-left-radius にマッピングされます。
• border-start-end-radius は top-right-radius にマッピングされます。
• border-end-start-radius は bottom-left-radius にマッピングされます。
• border-end-end-radius は bottom-right-radius にマッピングされます。

`dir="rtl"` (例：アラビア語) を使用した `writing-mode: horizontal-tb` での `border-radius` のマッピング

ここでは、インライン方向が反転します。

• border-start-start-radius は top-right-radius にマッピングされます。（ブロック開始は上、インライン開始は右）。
• border-start-end-radius は top-left-radius にマッピングされます。
• border-end-start-radius は bottom-right-radius にマッピングされます。
• border-end-end-radius は bottom-left-radius にマッピングされます。

`writing-mode: vertical-rl` (例：日本語) での `border-radius` のマッピング

ここでは、両方の軸が回転します。

• border-start-start-radius は top-right-radius にマッピングされます。（ブロック開始は右、インライン開始は上）。
• border-start-end-radius は bottom-right-radius にマッピングされます。
• border-end-start-radius は top-left-radius にマッピングされます。
• border-end-end-radius は bottom-left-radius にマッピングされます。

これらの新しいプロパティを使用することで、コンテンツのフローに意味的に関連付けられ、物理的な画面には関連付けられない角の半径を定義できます。「start-start」の角は、言語やテキストの方向に関係なく、常に正しい角になります。

実践的な実装：グローバル対応コンポーネントの構築

理論は素晴らしいですが、これが実際にどのように機能するかを見てみましょう。古い物理プロパティを使用して単純なプロファイルカードコンポーネントを構築し、それをリファクタリングして、レベル 1 とレベル 2 の両方の最新の論理プロパティを使用します。

カードには、片側に float された画像、タイトル、いくつかのテキスト、装飾的な境界線と丸い角があります。

「古い」方法：もろい、物理プロパティカード

これが数年前にこのカードをスタイリングした方法です。

/* --- CSS (物理プロパティ) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

標準的な英語の LTR コンテキストでは、これは問題なく表示されます。しかし、これを dir="rtl" または writing-mode: vertical-rl を持つコンテナ内に配置すると、レイアウトが壊れます。装飾的な境界線が間違った側にあり、アバターが間違った側にあり、マージンが正しくなく、丸い角が間違った場所にあります。

「新しい」方法：堅牢な、論理プロパティカード

次に、論理プロパティを使用して同じコンポーネントをリファクタリングしましょう。レベル 1 のプロパティとレベル 2 からの新しい追加機能を活用します。

/* --- CSS (論理プロパティ) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` 省略形はすでに論理的です！ */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* レベル 2 パワー！ */

  border-end-start-radius: 8px; /* レベル 2 パワー！ */

}

.logical-card .avatar {

  float: inline-start; /* レベル 2 パワー！ */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

テストと検証

この新しい CSS を使用すると、コンポーネントを任意のコンテナにドロップでき、自動的に適応されます。

• LTR コンテキストでは：元の物理バージョンと同一に見えます。
• RTL コンテキスト (dir="rtl") では：アバターは右に float し、そのマージンは左にあり、装飾的な境界線は右にあり、テキストは start 揃え（右）になります。丸い角は、右上と右下に正しく配置されます。それはただ機能します。
• 垂直コンテキスト (writing-mode: vertical-rl) では：カードの「幅」（現在の垂直方向の inline-size）は 300px になります。アバターは「上」（inline-start）に float し、そのマージンは「下」（inline-end）にあります。装飾的な境界線は右側 (inline-start) にあり、丸い角は右上と左上にあります。コンポーネントは、メディアクエリやオーバーライドなしに、完全に正しく再調整されています。

ブラウザのサポートとフォールバック

これはすべて素晴らしいように聞こえますが、ブラウザのサポートはどうですか？朗報は、レベル 1 論理プロパティのサポートは、すべての最新ブラウザで優れていることです。margin-inline-start や padding-block のようなプロパティを今日使用できます。

新しいレベル 2 機能のサポートは急速に向上していますが、まだ普遍的ではありません。float、clear、および resize の論理値は十分にサポートされています。論理的な border-radius プロパティは最新のものであり、フィーチャーフラグの背後にあるか、最新のブラウザバージョンにある可能性があります。いつものように、最新の互換性データについては、MDN Web Docs や CanIUse.com のようなリソースを参照する必要があります。

プログレッシブエンハンスメントの戦略

CSS は回復力があるように設計されているため、古いブラウザにフォールバックを簡単に提供できます。カスケードにより、ブラウザが論理プロパティを理解できない場合、それを単純に無視し、その前に定義された物理プロパティを使用することが保証されます。

フォールバック対応の CSS を記述する方法を次に示します。

.card {

  /* 古いブラウザのフォールバック */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* フォールバックをオーバーライドする最新の論理プロパティ */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

このアプローチにより、すべての人に確実なベースラインエクスペリエンスが保証されると同時に、最新のブラウザを使用しているユーザーに、機能強化されたアダプティブレイアウトが提供されます。複数の記述モードをサポートする必要がないプロジェクトの場合、これはやり過ぎかもしれません。しかし、グローバルアプリケーション、デザインシステム、またはテーマの場合、これは堅牢で将来性のある戦略です。

未来は論理的です：レベル 2 を超えて

物理的な考え方から論理的な考え方への移行は、最新の CSS で最も重要な変化の 1 つです。これは、多様なグローバルウェブの現実とスタイリング言語を一致させます。私たちを、もろく、画面指向のハックから、回復力があり、コンテンツ指向のデザインへと移行させます。

まだギャップがありますか？いくつかあります。background-position やグラデーションのようなプロパティの論理値は、まだ議論中です。しかし、レベル 2 のリリースにより、日々のレイアウトとスタイリングタスクの大部分は、完全に論理的なアプローチを使用して達成できるようになりました。

開発者への行動喚起は明確です：論理プロパティをデフォルトで使用を開始してください。width の代わりに inline-size を使用してください。左右のマージンを個別に設定する代わりに、margin-inline を使用してください。これは、異なる言語をサポートするだけではありません。より優れた、より回復力のある CSS を記述することです。論理プロパティを使用して構築されたコンポーネントは、LTR、RTL、または垂直レイアウトで使用されているかどうかに関係なく、本質的により再利用可能で適応可能です。それは単により良いエンジニアリングです。

結論：フローを受け入れる

CSS 論理プロパティレベル 2 は、単なる新しい機能のコレクションではありません。それはビジョンの完成です。コンテンツの自然な流れを尊重するレイアウトを構築するために必要な最後の重要な要素を提供します。float: inline-start や border-start-start-radius のようなプロパティを採用することで、画面上にボックスを配置するだけから、真にグローバルで、包括的で、将来性のあるウェブエクスペリエンスを設計することに、私たちの技術を高めます。

次に新しいプロジェクトを開始したり、新しいコンポーネントを構築したりするときは、margin-left と入力する前に一時停止してください。「左を意味するのか、それとも開始を意味するのか」と自問してください。その小さなメンタルシフトを行うことで、どこにいても、誰にとっても、より適応性がありアクセスしやすいウェブに貢献することになります。